﻿@namespace Maanfee.Dashboard.Views.Core
@*px-3 py-2 rounded-br-xl rounded-l-xl*@

<style>
	.mud-theme-manager-button-spin {
		animation-duration: 5000ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation: Pendulum 3.5s ease-in-out infinite;
	}

	@("@keyframes Pendulum {  0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); }}")
	
</style>

<div class="theme-button px-3 py-2 theme-button" @onclick="OnClick">
	<MudTooltip Arrow="true" Placement="Placement.Left" Text="@DashboardResource.StringTheme">
		<MudIcon Icon="@Icons.Material.Filled.Brush" Style="color: white" Class="mud-theme-manager-button-spin" />
	</MudTooltip>
</div>

@if (SharedLayoutSettings.IsRTL)
{
	<style>
		.theme-button {
			position: fixed;
			top: 13%;
			background: var(--mud-palette-primary);
			z-index: 1150;
			left: 0;
			cursor: pointer;
			box-shadow: rgba(55,55,55,0.15) 0 0 2px 0, rgba(55,55,55,0.15) 0 8px 12px 0;
			border-top-right-radius: 24px !important;
			border-bottom-right-radius: 24px !important;
		}
	</style>
}
else
{
	<style>
		.theme-button {
			position: fixed;
			top: 13%;
			background: var(--mud-palette-primary);
			z-index: 1150;
			right: 0;
			cursor: pointer;
			box-shadow: rgba(55,55,55,0.15) 0 0 2px 0, rgba(55,55,55,0.15) 0 8px 12px 0;
			border-top-left-radius: 24px !important;
			border-bottom-left-radius: 24px !important;
		}
	</style>
}

@code {

	[Parameter] 
	public EventCallback<MouseEventArgs> OnClick { get; set; }

}